<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>menu</title>
    <link rel="stylesheet"  th:href="@{lib/layui-v2.5.5/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{css/public.css}"   media="all">
    <style>
        .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
            height: 34px;
            line-height: 34px;
            padding: 0 8px;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div>
            <div class="layui-btn-group">
                <button class="layui-btn" id="btn-expand">全部展开</button>
                <button class="layui-btn layui-btn-normal" id="btn-fold">全部折叠</button>
            </div>
            <table id="munu-table" class="layui-table" lay-filter="munu-table"></table>
        </div>
    </div>
</div>
<!-- 操作列 根据类型的不同显示不同的操作按钮 -->
<script type="text/html" id="auth-state">
    {{#  if(d.type== '2'){ }}
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    {{#  } else { }}
        <a class="layui-btn layui-btn-red layui-btn-xs" lay-event="add">添加</a>
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    {{#  } }}
</script>

<script  th:src="@{lib/layui-v2.5.5/layui.js}"  charset="utf-8"></script>
<script th:src="@{js/lay-config.js?v=1.0.4}"  charset="utf-8"></script>

<script>
    layui.use(['table', 'treetable','form'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var treetable = layui.treetable;
        var form = layui.form;
        // 渲染表格
        layer.load(2);
        treetable.render({
            treeColIndex: 1,
            treeSpid: -1, //从-1开始，需要最先级别-1
            treeIdName: 'id',
            treePidName: 'parentId',
            elem: '#munu-table',
            url: 'dept/deptAll',
            page: false,
            cols: [
                [
                {type: 'numbers'},
                {field: 'name', width: 120, title: '部门名称'},
                {field: 'type', title: '类型1',width: 100,
                    templet: function(res) {  //类型。0：公司；1：部门；2：科室/小组
                        if(res.type == '0') {
                            return ' <span class="layui-badge">公司</span>';
                        } else if(res.type == '1') {
                            return '<span class="layui-badge layui-bg-orange">部门</span>';
                        } else {
                            return ' <span class="layui-badge layui-bg-blue">科室/小组</span>';
                        }
                    }
             },
                {field: 'status',
                    title: '状态',
                    width: 80,
                    templet: function(res) {  //状态。0：正常；1：禁用
                        if(res.status == '0') {
                            return '  <span class="layui-badge layui-bg-green">正常</span>';
                        }  else {
                            return '<span class="layui-badge layui-bg-gray">禁用</span>';
                        }
                    }},
                {field: 'sort', width: 120, align: 'center', title: '排序号'},
                    {field: 'createTime', width: 180, align: 'center', title: '创建时间'},
                {templet: '#auth-state', width: 150, align: 'center', title: '操作'}
              ]
            ],
            done: function () {
                layer.closeAll('loading');
            }
        });

        $('#btn-expand').click(function () {
            treetable.expandAll('#munu-table');
        });

        $('#btn-fold').click(function () {
            treetable.foldAll('#munu-table');
        });

        //监听弹出框表单提交，massage是修改界面的表单数据'submit(demo11),是修改按钮的绑定
        function setFormValue(obj,data){
            console.log(data)
            if(data.status==1){
                data.status='on';
            }else{
                data.status='off';
            }
            //给表单赋值
            console.log(data)
            form.val("updateBtn", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                "id": data.id// "name": "value"
                ,"name": data.name
                ,"parentId": data.parentId
                ,"sort":data.sort
                ,"status":data.status
            });

            form.on('submit(updateBtn)', function (data) {
                var datas=data.field;
                if(datas.status=='on'){
                    datas.status=1;
                }else{
                    datas.status=0;
                }
                console.log(datas);
                $.ajax({
                    url:"dept/updateSubmit",
                    async: false,
                    type:"POST",
                    dataType: "text",
                    data:datas,
                    success: function(result){
                        result =JSON.parse(result);
                        if (result.code==200) {
                            layer.msg("修改成功!", {
                                icon: 6,
                                time: 500
                            }, function () {
                                parent.window.location.reload();
                                var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                                parent.layer.close(index);
                            });
                        } else {
                            layer.msg('修改失败')
                        }
                    }
                })
                return false;
            });

        }

        //监听工具条
        table.on('tool(munu-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'del') {
                layer.confirm('真的删除ID为：'+data.id+"的记录吗?", function(index){
                    //向服务端发送删除指令
                    $.ajax({
                        url:'dept/deleteDeptbyId',
                        type:'get',
                        data:{'id':data.id},//向服务端发送删除的id
                        success:function(suc){
                            if(suc.code==200){
                                layer.close(index);
                                layer.msg("删除成功",{icon:1});
                                parent.window.location.reload();//刷新母版
                            }
                            else{
                                layer.msg("删除失败",{icon:5});
                            }
                        }
                    });
                    layer.close(index);
                });
            } else if (layEvent === 'edit') {
                layer.msg('修改' + data.id);
                layer.open({
                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                    type: 1,
                    title: "修改部门",
                    area: ['50%', '50%'],
                    content: $("#deptUpdateTest")//引用的弹出层的页面层的方式加载修改界面表单
                });
                //动态向表传递赋值可以参看文章进行修改界面的更新前数据的显示，当然也是异步请求的要数据的修改数据的获取
                setFormValue(obj,data);
            }else{
                //添加工能
                var index = layer.open({
                    title: '添加部门',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['50%', '50%'],
                    content: 'addDept?type='+data.type+"&parentId="+data.id,
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });

            }
        });
    });

</script>
<div class="layui-form layuimini-form" id="deptUpdateTest" style="display:none;" lay-filter="updateBtn">
    <input type="hidden" name="id" />
    <div class="layui-form-item">
        <input type="hidden" name="parentId"  >
        <label class="layui-form-label required">名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="required" lay-reqtext="名称不能为空" placeholder="请输入名称" value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">排序号</label>
        <div class="layui-input-block">
            <input type="number" name="sort"  value="0" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">状态</label>
        <div class="layui-input-block">
            <input type="checkbox" name="status" lay-skin="switch" lay-text="正常|禁用" checked>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="updateBtn">确认修改</button>
        </div>
    </div>
</div>

</body>
</html>